<div [@routerTransition]>
  <div class="m-subheader ">
    <div class="d-flex align-items-center">
      <div class="mr-auto col-xs-6">
        <h3 class="m-subheader__title m-subheader__title--separator">
          <span>分类管理</span>
        </h3>
        <span class="m-section__sub"> 分类管理的文本头信息 </span>
      </div>
      <div class="col-xs-6 text-right">
        <button
          (click)="createOrEditClassificationModal.show()"
          *ngIf="isGranted('Pages.Resource.Classification.Operation')"
          class="btn btn-primary blue"
        >
          <i class="fa fa-plus"></i> 创建新的基类
        </button>
      </div>
    </div>
  </div>

  <div class="m-content classification-content">
    <div class="m-portlet m-portlet--mobile">
      <div class="m-portlet__body">
        <div class="row align-items-center">
          <!-- <Primeng-TurboTable-Start> -->
          <div
            class="primeng-datatable-container"
            [busyIf]="primengTableHelper.isLoading"
          >
            <p-treeTable [value]="classifications">
              <ng-template pTemplate="header">
                <tr>
                  <th style="width: 250px;">名称</th>
                  <th style="width: 150px;">编号</th>
                  <th style="width: 150px;">类型</th>
                  <th style="width: 150px;">单位</th>
                  <th style="width: 150px;">操作</th>
                </tr>
              </ng-template>
              <ng-template pTemplate="body" let-rowNode let-rowData="rowData">
                <tr>
                  <td>
                    <p-treeTableToggler
                      [rowNode]="rowNode"
                    ></p-treeTableToggler>
                    {{ rowData.displayName }}
                  </td>
                  <td>{{ rowData.code }}</td>
                  <td>{{ rowData.typeName }}</td>
                  <td>{{ rowData.unit }}</td>
                  <td>
                    <div class="btn-group dropdown" normalizePosition>
                      <button
                        class="dropdown-toggle btn btn-sm btn-primary"
                        data-toggle="dropdown"
                        aria-haspopup="true"
                        aria-expanded="false"
                      >
                        <i class="fa fa-cog"></i><span class="caret"></span>
                        {{ l("Actions") }}
                      </button>
                      <ul class="dropdown-menu">
                        <li>
                          <a
                            *ngIf="
                              permission.isGranted(
                                'Pages.Resource.Classification.Operation'
                              ) && rowData.haveChildren
                            "
                            (click)="
                              createOrEditClassificationModal.show(
                                undefined,
                                rowData.id
                              )
                            "
                            >创建子类</a
                          >
                        </li>
                        <li>
                          <a
                            *ngIf="
                              permission.isGranted(
                                'Pages.Resource.Classification.Operation'
                              )
                            "
                            (click)="
                              createOrEditClassificationModal.show(
                                rowData.id,
                                undefined
                              )
                            "
                            >编辑</a
                          >
                        </li>
                        <li>
                          <a
                            *ngIf="
                              permission.isGranted(
                                'Pages.Resource.Classification.Operation'
                              )
                            "
                            (click)="deleteClassification(rowData.id)"
                            >删除</a
                          >
                        </li>
                      </ul>
                    </div>
                  </td>
                </tr>
              </ng-template>
            </p-treeTable>
          </div>
          <!-- <Primeng-TurboTable-End> -->
        </div>
      </div>
    </div>
  </div>
  <createOrEditClassificationModal
    #createOrEditClassificationModal
    (modalSave)="getClassifications()"
  ></createOrEditClassificationModal>
</div>
